<template>
   <a-modal
      v-model:visible="visible"
      :title="formData.id?'编辑文章':'新增文章'"
      width="100%"
      wrap-class-name="full-modal"
      :ok-button-props="{ style: { display: 'none' } }"
      :cancel-button-props="{ style: { display: 'none' } }"
      :destroyOnClose="true"
    >
      <a-spin :spinning="spinning">
      <a-row :gutter="12">
        <a-col :span="18">
          <a-card class="editor-container">
            <div class="article-top">
              <div class="article-top-left">
                <p class="article-top-label">标题：</p>
                <a-input v-model:value="formData.title" placeholder="请输入文章标题..." :bordered="false" style="width: 1000px;" />
              </div>
              <a-button type="primary" size="large" @click="onSubmit">发布</a-button>
            </div>
            <v-md-editor v-model="formData.content" height=""></v-md-editor>
          </a-card>
        </a-col>

        <a-col :span="6">
          <a-card>
            <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
              <a-form-item label="分类" name="orgId">
                <a-select
                  v-model:value="formData.columnId"
                  style="width: 100%"
                  :options="columnList"
                  placeholder="请选择文章栏目"
                  :field-names="{label: 'name', value: 'id' }" />
              </a-form-item>
              <a-form-item label="标签" name="tags">
                <a-select
                  v-model:value="formData.tags"
                  mode="tags"
                  placeholder="请选择文章标签"
                  :options="tagsOptions"
                ></a-select>
              </a-form-item>
              <a-row :gutter="12">
                <a-col :span="12">
                  <a-form-item label="文章封面" name="cover">
                    <xn-upload-single v-model="formData.cover" uploadMode="image"></xn-upload-single>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="上传视频" name="video">
                    <xn-upload-single v-model="formData.video" uploadMode="image"></xn-upload-single>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :span="12">
                  <a-form-item label="浏览量" name="viewCount">
                    <a-input-number v-model:value="formData.viewCount" style="width: 100%" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="是否显示" name="visible">
                    <a-radio-group v-model:value="formData.visible" :options="visibleOptions" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :span="12">
                  <a-form-item label="价格" name="price">
                    <a-input-number v-model:value="formData.price" style="width: 100%" :min="0" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="排序" name="sortCode">
                    <a-input-number v-model:value="formData.sortCode" style="width: 100%" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-item label="资源链接" name="link">
                    <a-textarea v-model:value="formData.link" placeholder="资源链接" :rows="3" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>


</template>


<script setup>
  import { required } from "@/utils/formRules"
  import tool from "@/utils/tool"
  import articleApi from "@/api/biz/articleApi"
  import columnApi from '@/api/biz/columnApi'
import { message } from "ant-design-vue";
  

  const visible = ref(false)
  const visibleOptions = tool.dictList("BIZ_ARTICLE_VISIBLE")

  const submitLoading = ref(false)
  const spinning = ref(false)
  const columnList = ref([])
  const formRef = ref()
	const formData = ref({})
  const formRules = {
    price: [required('请输入积分')],
    link: [required('请输入链接')],
    columnId: [required('请选择所属栏目')],
    tags: [required('请选择标签')],
    visible: [required('请选择文章是否显示')],
    cover: [required('请上传文章封面')],
    sortCode: [required('请输入排序')],
    viewCount: [required('请输入浏览量')],
  }

  const emits = defineEmits({successful: null})

  const getColumnList = () => {
    columnApi.list().then(res=>{
      columnList.value = res
    })
  }
  const getArticleDetail = (id) => {
    spinning.value = true
    articleApi
      .detail({id})
      .then(data=> {
        // 避免null值组件报错
        data.content = data.content===null?"":data.content
        data.video = data.video===null?{}:data.video
        formData.value = data
      })
      .finally(()=>{
        spinning.value = false
      })
  }
  const onSubmit = () => {
    submitLoading.value = true    
    if (!formData.value.content) {
      return message.warning('文章内容不能为空')
    }
    formRef.value.validate().then(()=>{
      articleApi.
        submitForm(formData.value,formData.value.id)
        .then(()=>{
          submitLoading.value = false
          emits('successful')
        })
        .finally(()=>{
          submitLoading.value = false
          visible.value = false
        })
    })
  }

  const onOpen = (id) => {
    visible.value = true
    formData.value = {}
    if (id) {
      formData.value.id = id
      getArticleDetail(id)
    }
    getColumnList()
  }


  defineExpose({
    onOpen
  })

</script>



<style scoped lang="less">
  .editor-container{
    :deep(.ant-card-body){
      padding: 0;
      height: calc(100vh - 64px - 60px - 12px - 12px - 2px);
    }
  }

  .article-top-label{
    margin: 0;
  }

  .article-top{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid #DDDDDD;

   .article-top-left{
      display: flex;
      align-items: center;

      .article-top-label{
        width: 100px;
        font-size: 24px;
        color: #707070;
      }
    }

    :deep(.ant-input){
      font-size: 24px;
    }
  }

  :deep(.ant-upload){
    width: 190px;
  }

  .v-md-editor{
    box-shadow: none;
    height: calc(100vh - 64px - 60px - 100px);
  }

  :deep(.ant-upload-list-picture-card-container){
    height: 106px;
    width: 190px;
  }
</style>